<template>
  <view class="photo-list-container" :style="{ height: containerHeight + 'px' }">
    <template v-for="(v, i) in modelValue" :key="i">
      <view class="photo-list__item" :style="v.styles" @click.stop="previewPhoto(v.imagePathBig)">
        <view class="photo-list__item--img">
          <TImage
            :src="v.imagePathSmall"
            :width="v.styles.width"
            :height="v.styles.height"
            mode="aspectFill"
          />
        </view>
        <slot :index="i" />
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';
  import { type dataItem } from './types';
  import TImage from '../TImage/index.vue';

  const props = defineProps({
    modelValue: {
      type: Array as PropType<dataItem[]>,
      default: [],
    },
    containerHeight: propTypes.number.def(500),
  });

  /** 预览图片 */
  function previewPhoto(url: string) {
    const urls = props.modelValue.map((v) => v.imagePathBig);
    wx.previewImage({
      urls,
      current: url,
      showmenu: true,
    });
  }
</script>

<style lang="scss" scoped>
  .photo-list {
    &-container {
      background-color: #fff;
      position: relative;
      padding-bottom: 30rpx;
      transition: height 0.3s;
    }
    &__content {
      position: relative;
    }
    &__item {
      position: absolute;
      transition: all 0.5s;
      &--img {
        border-radius: 10rpx;
        overflow: hidden;
      }
    }
  }
</style>
